<!--药品配伍禁忌-->
<template>
  <Popup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="550"
    :height="595"
    @hidden="hidden"
    @isReady="initPopup"
    :toolbarItems="popupToolbarItems"
    title="药品配伍禁忌"
  >
    <DxScrollView v-bind="scrollSetting">
      <DxForm label-location="left" :col-count="1">
        <DxGroupItem>
          <DxSimpleItem data-field="">
            <DxLabel text="药品品种" />
            <div>
              <DxTextBox
                v-bind="{ stylingMode: 'outlined', disabled: true }"
                :value="drugDetail.name"
              />
            </div>
          </DxSimpleItem>
        </DxGroupItem>

        <DxGroupItem>
          <div class="center-title">
            <div style="font-size: 16px; width: 200px">常规用法及用量:</div>
            <DxButton type="text" icon="plus" @click="addTaboo"></DxButton>
          </div>
        </DxGroupItem>
        <DxSimpleItem>
          <template #default>
            <div>
              <div
                class="item-template"
                v-for="(item, index) in formData.drugCompatilitys"
                :key="index"
              >
                <DxCheckBox
                  v-model:value="deleteTabooIndexes[index]"
                ></DxCheckBox>
                <p>药品名称</p>
                <DxSelectBox
                  v-bind="durgSetting"
                  :dataSource="drugDatalist"
                  v-model:value="item.composition"
                ></DxSelectBox>
                <!-- @input="getDrugList($event.event.target.value)" -->
                <p>禁忌类型</p>
                <DxSelectBox
                  v-bind="tagSetting"
                  :items="tabooTypeList"
                  v-model:value="item.tabooDrugTabooId"
                ></DxSelectBox>
              </div>
            </div>
          </template>
        </DxSimpleItem>
      </DxForm>
    </DxScrollView>
    <div class="lb-form-button-left">
      <DxButton
        text="删除"
        styling-mode="text"
        type="danger"
        @click="deleteTaboo()"
      />
    </div>
    <div class="lb-form-button-right">
      <DxButton text="取消" styling-mode="text" @click="hidden()" />

      <!-- <DxButton text="保存并继续添加" styling-mode="text" type="default" /> -->
      <!-- @click="save" -->
      <DxButton
        text="确定"
        styling-mode="text"
        type="default"
        @click="submitTaboo"
      />
    </div>
  </Popup>
</template>

<script lang="ts">
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxRequiredRule,
  DxLabel,
} from "devextreme-vue/form";
import DxTagBox from "devextreme-vue/tag-box";
import DxCheckBox from "devextreme-vue/check-box";
import { ElButton, ElIcon, ElAlert } from "element-plus";
import {
  Vue,
  Options,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import { DxColumn, DxDataGrid, DxEditing } from "devextreme-vue/data-grid";
import DataSource from "devextreme/data/data_source";
import DxButton from "devextreme-vue/button";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import { DxSelectBox } from "devextreme-vue/select-box";
import { DxTextBox } from "devextreme-vue/text-box";
import Popup from "@/framework/components/popup/popup.vue";
import { dxPopupToolbarItem } from "devextreme/ui/popup";
import { dxButtonOptions } from "devextreme/ui/button";
import { Tool } from "@/framework/utils/tool";
import {
  CompatibilityTabooOutput,
  DrugClient,
  OutPutDrugInfo,
  OutputSearchForDrug,
} from "@/api/api_drugclient";
import DrugData from "@/data-source/drug";
import DrugTabooData from "@/data-source/drug-taboo";
import { ApiTool } from "@/api/api-tool";
import {
  CompatibilityTabooDrugClient,
  CompatibilityTabooDrugInput,
  DrugCompatibilitysInput,
} from "@/api/api_compatibilitytaboodrugclient";
import { DxScrollView } from "devextreme-vue/scroll-view";
import { dxScrollViewOptions } from "devextreme/ui/scroll_view";

let self: CreateDrugTaboo;
@Options({
  components: {
    Popup,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxRequiredRule,
    DxLabel,
    DxTagBox,
    DxCheckBox,
    ElButton,
    DxColumn,
    DxDataGrid,
    DxEditing,
    DxButton,
    ElIcon,
    ElAlert,
    DxSelectBox,
    DxTextBox,
    DxScrollView,
  },
})
export default class CreateDrugTaboo extends Vue {
  // 是否展示弹窗
  @Prop({ type: Boolean, default: false })
  value!: boolean;

  // 药品id
  @Prop({ required: true })
  drugId: string;

  // 药品id
  @Prop({ required: true })
  drugType: number;

  // 方案id
  @Prop({ required: true })
  drugSchemeId: string;
  // 方案id
  @Prop({ required: true })
  drugSortId: string;

  editOptions = {
    stylingMode: "outlined",
    placeholder: "请输入",
  };
  scrollSetting: dxScrollViewOptions = {
    height: function () {
      return "500px";
    },
    showScrollbar: "always",
  };
  popupToolbarItems: dxPopupToolbarItem[] = [
    {
      location: "after",
      widget: "dxButton",
      options: {
        text: "全部禁忌",
        stylingMode: "text",
        type: "default",
        onClick() {
          // self.$router.push("/")
        },
      } as dxButtonOptions,
    },
  ];
  getSimpleSuffix(
    text: string,
    extendOptions: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    let options: dxSelectBoxOptions = {
      stylingMode: "outlined",
      buttons: [
        {
          name: "unit",
          location: "after",
          options: {
            text: text,
            stylingMode: "text",
          },
        },
      ],
    };

    return Object.assign({}, extendOptions, options);
  }
  getSelectBoxOptions(extendOptions: dxSelectBoxOptions) {}

  tagSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    displayExpr: "displayValue",
    valueExpr: "dictionaryId",
    searchEnabled: true,
    searchExpr: "displayValue",
    showDropDownButton: true,
  };
  durgSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    displayExpr: "drugName",
    valueExpr: "drugId",
    searchEnabled: true,
    searchExpr: "drugName",
    showDropDownButton: true,
  };

  popupVisible = this.value || false;

  dataSource = [];
  @Inject()
  apiTool: ApiTool;
  // 药品资源(获取后端数据)
  drugData: DrugData;
  drugTabooData: DrugTabooData;
  created() {
    self = this;
    let client = this.apiTool.createClient(DrugClient);
    let clientTaboo = this.apiTool.createClient(CompatibilityTabooDrugClient);
    this.drugData = new DrugData(client, this);
    this.drugTabooData = new DrugTabooData(clientTaboo, this);
  }

  // 初始化数据
  initPopup() {
    this.drugDetail = {};
    // this.drugList = [];
    this.tabooTypeList = [];
    this.formData = {
      drugCompatilitys: [Object.assign({}, this.compat)],
      drugId: "",
    };
    this.getDatail();
    this.getDrugTabooModel();
    // this.getDrugList("");
    this.getTabooTypeList();
    this.setDrugDatalist();
  }

  // 药品详情
  drugDetail: OutPutDrugInfo = {};
  async getDatail() {
    this.drugDetail = await this.drugData.info(this.drugId, this.drugSchemeId);
  }

  // // 药品列表
  // drugList: OutPutDrugInfo[] | any = [];
  // async getDrugList(value) {
  //   let res = await this.drugData.searchByNameWBPY(value);
  //   this.drugList = res.data;
  // }

  // 药品列表源
  drugDatalist: DataSource = null;
  setDrugDatalist() {
    this.drugDatalist = new DataSource({
      key: "drugId",
      load: (options) => {
        console.log("load", options);
        let searchValue = options.searchValue || "";
        return self.drugData.searchByNameWBPY(searchValue);
      },
      byKey: async (key) => {
        if (!key) {
          return;
        }
        let data = await self.drugData.info(key, this.drugSchemeId);
        let info = {
          drugName: data.name,
          drugId: data.drugId,
        };
        return info
      },
    });
  }
  // searchDrug(value){
  //   this.item.composition
  //   this.getDrugList(value)
  // }
  // 禁忌类型
  tabooTypeList: any[] = [];
  async getTabooTypeList() {
    this.tabooTypeList = await this.drugTabooData.getTabooTypeList();
  }

  // 禁忌药品
  readonly compat: DrugCompatibilitysInput = {
    composition: "",
    tabooDrugTabooId: "",
  };

  // form表单
  formData: CompatibilityTabooDrugInput = {
    drugCompatilitys: [Object.assign({}, this.compat)],
    drugId: "",
  };
  // 获取模型
  async getDrugTabooModel() {
    this.formData =
      (await this.drugTabooData.getTabooModel(this.drugId)) || this.formData;
    this.deleteTabooIndexes = this.formData.drugCompatilitys.map((item) => {
      return false;
    });
  }

  // 添加禁忌
  addTaboo() {
    let drugCompatilitys = this.formData.drugCompatilitys.concat(
      Object.assign({}, this.compat)
    );
    this.formData = {
      ...this.formData,
      drugCompatilitys,
    };
    this.deleteTabooIndexes = this.deleteTabooIndexes.concat(false);
  }
  log(value) {
    console.log("value", value);
  }
  // 删除禁忌
  deleteTabooIndexes: boolean[] = [false];
  deleteTaboo() {
    let indexes = this.deleteTabooIndexes;
    let drugCompatilitys: DrugCompatibilitysInput[] = [];
    for (let key in this.formData.drugCompatilitys) {
      let item = this.formData.drugCompatilitys[key];
      let isDelete = indexes[key];
      if (!isDelete) {
        drugCompatilitys.push(item);
      }
    }
    this.formData = {
      ...this.formData,
      drugCompatilitys,
    };
    this.deleteTabooIndexes = drugCompatilitys.map((item) => {
      return false;
    });
  }
  // 编辑成功
  @Emit("success")
  submitSuccess(e?: any) {}
  // 提交禁忌
  submitTaboo() {
    this.formData.drugId = this.drugId;
    this.drugTabooData.add(this.formData).then((res) => {
      this.submitSuccess();
      this.hidden();
    });
  }
  // 弹窗
  @Watch("value")
  watchValue() {
    this.popupVisible = this.value;
  }

  hidden() {
    this.popupVisible = false;
    this.$emit("update:value", this.popupVisible);
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 56px;
  padding: 15px;
  .title-content {
    display: flex;
    justify-content: space-between;

    .title-operation {
      display: flex;
      justify-content: space-between;
    }
  }
}
.notice {
  display: flex;
  padding: 10px 0;
  .el-alert {
    width: auto;
    margin: 0 5px;
    padding: 4px;
  }
}
.pishi {
  display: flex;
  // justify-content: start;
  align-items: center;
}
.center-title {
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lb-form-button-right {
  .div1 {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.item-template {
  display: flex;
  align-items: center;
  margin: 6px 0;
  p {
    width: 90px;
    padding: 0 10px;
  }
  div.dx-selectbox {
    flex: 3;
    &:last-child {
      flex: 2;
    }
  }
}
</style>
